*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section.infiniteScrolling{
  height: calc(var(--display-height) / 3.5);
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-end; */
  justify-content: center;
  align-items: center;
  /* border: solid red 3px; */
}

.wrapper {
  /* margin-bottom: 1rem; */
  /* border: solid red 3px; */
  width: 70%;
  height: 45%;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    rgba(0, 0, 0, 0)
  );
}

@keyframes scrollLeft{
  to{
    left: -100%;
  }
}

.item {
  /* background-color: red; */
  width: calc(15vw); /* Adjust the width based on the viewport width */
  height: 100%; /* Maintain aspect ratio by dividing the width */
  border-radius: 2rem;
  position: absolute;
  left: 100vw; /* Start off-screen on the right */
  animation-name: scrollLeft;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.item1 {
  animation-delay: calc(15s / 7 * (7 - 1) * -1);
}

.item2 {
  animation-delay: calc(15s / 7 * (7 - 2) * -1);
}

.item3 {
  animation-delay: calc(15s / 7 * (7 - 3) * -1);
}

.item4 {
  animation-delay: calc(15s / 7 * (7 - 4) * -1);
}

.item5 {
  animation-delay: calc(15s / 7 * (7 - 5) * -1);
}

.item6 {
  animation-delay: calc(15s / 7 * (7 - 6) * -1);
}

.item7 {
  animation-delay: calc(15s / 7 * (7 - 7) * -1);
}

.item8 {
  animation-delay: calc(15s / 7 * (7 - 8) * -1);
}

@media screen and (min-height: 1030px){
  section.infiniteScrolling{
    height: 20vh  !important;
  }
}